<template>
  <div>
    <el-dialog :title="''" :visible="info.show" width="92%" center @close="hideModal" :destroy-on-close="true">
      <div slot="title" class="title">
        {{ '车辆详细信息' }}
        <div class="line"></div>
      </div>

      <div class="modal-body">
        <div class="left">
          <div class="m-bottom">
            <el-row>

              <el-col style="overflow: hidden;" :class="['m-btn', 'active']">{{ carInfo.plateNo ? carInfo.plateNo :
                info.carData }}</el-col>
              <el-col :class="['m-btn', 'active']">{{
                carInfo.standardEmission ? carInfo.standardEmission : "未知" }}</el-col>
              <el-col :class="['m-btn', 'active']">{{ carInfo.fuelType ? carInfo.fuelType : "未知" }}</el-col>


            </el-row>
            <!-- <el-button :class="['m-btn']" style="color: #ef1a04" v-if="carInfo.inGreyList">{{ '遥测超标' }}</el-button>-->
            <!-- <el-button :class="['m-btn']" style="color: #00b4ffcc" v-if="carInfo.hasObd">{{ 'OBD监控' }}</el-button> -->
            <!-- <el-button :class="['m-btn']" style="color: #00b4ffcc" v-if="carInfo.inBlankList">{{ '白名单' }}</el-button>  -->
            <!-- <el-button :class="['m-btn']" style="color: #ef1a04" v-if="carInfo.labels" v-for="(item, index) in carInfo.labels.toString().split(',')">{{ item }}</el-button> -->
          </div>
          <div class="m-bottom">
            <div class="m-controls">
              <el-tooltip class="item" effect="dark" :content="item.tips" :placement="'left'"
                v-for="(item, index) in navs">
                <div :class="['large-btn', `nav-${item.key}`, nav === item.key ? 'active' : '']"
                  @click="changeTab(item)"></div>
              </el-tooltip>
            </div>
            <Car-State :info="carState" v-if="nav === 3"></Car-State>
            <!-- <Car-Base :info="carInfo" v-if="nav === 1"></Car-Base> -->
            <!-- <Car-Regi :info="carInfo" v-if="nav === 2"></Car-Regi> -->
            <Car-Image :info="carInfo" v-if="nav === 0"></Car-Image>
            <Car-Log :list="logList" v-show="nav === 4"></Car-Log>
            <!-- <Car-Obd :list="obdList" v-show="nav === 5"></Car-Obd> -->
            <Car-Trajectory :info="carState" v-show="nav === 6" @eventTraject="handleEventTraject"></Car-Trajectory>
            <Car-Image1 :info="carInfo" v-if="nav === 5"></Car-Image1>

          </div>
        </div>
        <My-Modal-Map :info="computedInfo" ref="myMap"></My-Modal-Map>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyModalMap from '@/components/MyModal/modalMap'
import CarState from '@/components/MyModal/carState'
import CarBase from '@/components/MyModal/carBase'
import CarRegi from '@/components/MyModal/carRegi'
import CarLog from '@/components/MyModal/carLog'
import CarImage from '@/components/MyModal/carImage'
import CarImage1 from '@/components/MyModal/carImage1'

import CarObd from '@/components/MyModal/carObd'
import CarTrajectory from '@/components/MyModal/carTrajectory'

import { getCarBaseInfo, getCarState, getCarLog, getCarObd } from '@/api/largescreen'
import { mapState, mapActions, mapMutations } from 'vuex'
import * as dayjs from "dayjs";
import {
  NewCarData,
  vehicleBaseInfo
} from '@/api/hzMJPT/mainInterface.js';
// import gcoord from 'gcoord'

export default {
  name: "MyModal",
  components: {
    MyModalMap,
    CarState,
    CarBase,
    CarRegi,
    CarLog,
    CarObd,
    CarTrajectory,
    CarImage,
    CarImage1
  },
  data() {
    return {
      nav: 0,
      navs: [

        // {
        //   tips: '发动机信息',
        //   key: 1
        // },
        // {
        //   tips: '登记信息',
        //   key: 2
        // },
        {
          tips: '基本信息',
          key: 0
        },
        {
          tips: '实时动态',
          key: 3
        },
        {
          tips: '遥感遥测记录',
          key: 4
        },
        
        // {
        //   tips: 'OBD记录',
        //   key: 5
        // },
        {
          tips: '车辆轨迹',
          key: 6
        },
        {
          tips: '企业进出记录',
          key: 5
        },
      ],
      carInfo: {
      },
      carState: {
        show1: false
      },
      logList: [],
      obdList: [],
      canClickLog: false,
      canClickObd: false,
      color: undefined,
    }
  },
  mounted() {
  },
  computed: {
    ...mapState({
      info: state => state.map.search
    }),
    computedInfo() {
      return {
        lnglat: [this.carState.longitude, this.carState.latitude],
        show: this.info.show,
        show1: this.carState.show1,
        standardEmission: this.color,
        plateNo: this.carState.plateNo,
        nav: this.nav
      };
    }
  },
  watch: {
    'info.show': {
      handler: function (val, oldval) {
        if (val) {
          this.getCarBaseInfo()
          this.getCarState()
          // this.getCarLog()
          // this.getCarObd()
          // this.getTodayLine()
          // this.getPrev15DayLine()
          // this.getPrev15DayPoint()
        } else {
          this.canClickLog = false
          this.canClickObd = false
          this.nav = 0
        }
      },
      immediate: true
    }
  },
  methods: {
    handleEventTraject(data) {
      this.$refs.myMap.eventTraject(data);
    },
    changeTab(e) {
      // console.log(e.key)
      this.nav = e.key
    },
    hideModal() {
      this.info.show = false
      this.carState.show1 = false
      this.color = null
    },
    // 获取基础信息
    getCarBaseInfo() {
      NewCarData({ vuid: this.info.carData })
        .then(res => {
          this.$nextTick(() => {
            this.carState = res.data[0]
            if (this.carState.standardEmission) {
              this.color = this.carState.standardEmission
            }
            this.carState.show1 = true
          })
        })
      vehicleBaseInfo({
        pid: this.info.carData
      }).then(res => {
        this.carInfo = res.data.length == 0 ? {} : res.data[0]
        if (this.carInfo.standardEmission) {
          this.color = this.carInfo.standardEmission

        }
        this.carInfo.labels = ""
      })
    },
    // 获取实时状态
    getCarState() {
      // getCarState({
      //   plateNo: this.info.plateNo
      // }).then(res => {
      //   if (res.code === "00000") {
      //     this.carState = res.data
      //   }
      // })
    },
    // 获取遥感遥测数据
    getCarLog() {
      if (!this.info.plateNo) {
        return false
      }
      getCarLog({
        plateNo: this.info.plateNo,
        limit: 10
      }).then(res => {
        if (res.code === '00000') {
          this.canClickLog = true
          this.logList = res.data || []
        }
      })
    },
    // 获取obd数据
    getCarObd() {
      // console.log(this.info, 'obd')
      if (!this.info.plateNo) {
        return false
      }
      getCarObd({
        plateNo: this.info.plateNo,
        limit: 10
      }).then(res => {
        if (res.code === '00000' && res.data != null) {
          this.canClickObd = true
          this.obdList = res.data || []
        }
      })
    },
    // 今天轨迹
    getTodayLine() {
      let stTime = dayjs.default().startOf('D').format('YYYY-MM-DD HH:mm:ss')
      let endTime = dayjs.default().startOf('D+1').format('YYYY-MM-DD HH:mm:ss')
      this.GetLocusLinesGeo({
        plateNo: this.info.plateNo,
        stTime,
        endTime
      }).then(res => {
        let data = gcoord.transform(res, gcoord.WGS84, gcoord.GCJ02)
        this.SET_TODAYLINE(data)
      })
    },
    // 15天轨迹 
    getPrev15DayLine() {
      let stTime = dayjs.default().subtract(15, 'day').format('YYYY-MM-DD HH:mm:ss')
      let endTime = dayjs.default().startOf('D+1').format('YYYY-MM-DD HH:mm:ss')
      this.GetLocusLinesGeo({
        plateNo: this.info.plateNo,
        stTime,
        endTime
      }).then(res => {
        let data = gcoord.transform(res, gcoord.WGS84, gcoord.GCJ02)
        this.SET_PREV15DAYLINE(data)
      })
    },
    getPrev15DayPoint() {
      let stTime = dayjs.default().subtract(15, 'day').format('YYYY-MM-DD HH:mm:ss')
      let endTime = dayjs.default().startOf('D+1').format('YYYY-MM-DD HH:mm:ss')
      this.GetCarHistoryPointsGeo({
        plateNo: this.info.plateNo,
        stTime,
        endTime
      }).then(res => {
        let data = gcoord.transform(res, gcoord.WGS84, gcoord.GCJ02)
        this.SET_PREV15DAYPOINTS(data)
      })
    }
  }
}
</script>

<style scoped lang="scss">
$color-blue: #00fff4;
$color-blue-dark: #2e9ef2;

::v-deep .el-dialog {
  height: 91vh;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(180deg,
      $color-blue 0%,
      $color-blue-dark 100%);
  border-image-slice: 1;
  background: #04091Cf0;
  box-shadow: 0 -1px 20px 0 $color-blue;
  border-radius: 0;
  margin-top: 4.5vh !important;
  border-top: 1px solid $color-blue;

  .el-dialog__body {
    padding: 20px 25px 30px;
  }

  .el-dialog__headerbtn {
    border: 2px solid $color-blue;
    border-radius: 100px;
    padding: 2px;

    .el-dialog__close {
      color: $color-blue;
      font-size: 20px;
    }
  }

  .title {
    color: #f0f6fb;
    font-size: 31px;
    text-align: center;
    padding: 0 20px 20px;
    position: relative;

    .line {
      width: 145px;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid;
      border-image: linear-gradient(90deg,
          #00000000 0%,
          #00fff488 20%,
          #00fff4 50%,
          #00fff488 80%,
          #00000000 100%) 1;
    }
  }

  .modal-body {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 0 20px;

    .left {
      width: calc(100% - 980px);

      .m-bottom {
        .m-btn {
          font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
          text-align: center;
          align-content: center;
          width: 128px;
          height: 42px;
          border: solid 1px #f3e8e822;
          background: #0c1124;
          border-radius: 0;
          font-size: 20px;
          color: #fff;
          position: relative;
          top: 0;
          margin-right: 10px;
          margin-left: 0px;

          &:nth-child(5) {
            margin-right: 0px;
          }

          &:nth-child(6n) {
            margin-top: 10px;
          }

          &.active {
            width: 140px;
            height: 43px;
            background: #082b49;
            border: 1px solid;
            border-image: linear-gradient(180deg, #00fff499 0%, #2E9EF299 100%) 1;
            font-size: 22px;
            color: #fff;
            top: 0;
          }
        }
      }

      .m-bottom {
        position: relative;

        .m-controls {
          position: absolute;
          width: 100px;
          min-height: 450px;

          .large-btn {
            width: 100px;
            height: 54px;
            cursor: pointer;
            margin-top: 25px;
            background: #0c1124 url("~@/assets/images/layer.svg") no-repeat center center;
            background-size: 26px 26px;
            border: solid 1px #f3e8e822;

            @for $i from 0 through 6 {
              &.nav-#{$i} {
                background: #0c1124 url("~@/assets/images/m-nav-#{$i}.svg") no-repeat center center;
                background-size: 26px 26px;

                &.active {
                  background: #0c1124 url("~@/assets/images/m-nav-#{$i}-.svg") no-repeat center center;
                  background-size: 26px 26px;
                  border: solid 1px #00fff499;
                }
              }
            }

          }
        }
      }
    }
  }
}
</style>
